<template>
  <div>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.passName"
            :placeholder="$t('modules.pass.pass_name')"
            clearable
            @blur="() => (dataForm.passName = dataForm.passName.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.status" clearable :placeholder="$t('common.status')">
            <el-option
              v-for="item in statusList"
              :key="item.code"
              :value="item.code"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-input
            v-model="dataForm.operator"
            :placeholder="$t('page.operator')"
            clearable
            @blur="() => (dataForm.passoperatorName = dataForm.operator.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" class="w-8" @click="searchPass">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="addPass">
            <svg-icon icon-class="plus" />
          </el-button>
        </el-form-item>
        <!-- <el-form-item class="float-right" v-if="!isDesign">
          <el-button type="primary" class="w-8" @click="designPass">
            <svg-icon icon-class="outlined-highlight" />
          </el-button>
        </el-form-item> -->
        <el-form-item class="float-right" v-if="isDesign">
          <el-button type="primary" @click="goNFC"> {{ $t('modules.pass.nfc') }} </el-button>
        </el-form-item>
        <el-form-item class="float-right" v-if="isDesign">
          <el-button type="primary" @click="goCertificate">
            {{ $t('modules.pass.certificate') }}
          </el-button>
        </el-form-item>
      </el-form>
      <UsedMembership v-if="!isDesign" :dataContent="usedDataList" />
      <TemplateList v-else :dataContent="dataList" />
    </el-card>
  </div>
</template>
<script>
import { isAuth } from '@/utils'
import TemplateList from './templateList.vue'
import UsedMembership from './usedMembership.vue'
export default {
  props: {
    isDesign: Boolean
  },
  components: {
    TemplateList,
    UsedMembership
  },
  data() {
    return {
      dataForm: {
        passName: '',
        status: '',
        operator: ''
      },
      statusList: [],
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      usedDataList: [
        {
          src: './assets/pass.png',
          number: '123456789',
          registerTime: 1787829323,
          merchant: 'tttt',
          integral: 1,
          level: 1,
          sn: 2310435430,
          consumptionTime: '2021-08-08'
        },
        {
          src: './assets/pass.png',
          number: '123456789',
          registerTime: 1787829323,
          merchant: 'tttt',
          integral: 1,
          level: 1,
          sn: 2310435430,
          consumptionTime: '2021-08-08'
        },
        {
          src: './assets/pass.png',
          number: '123456789',
          registerTime: 1787829323,
          merchant: 'tttt',
          integral: 1,
          level: 1,
          sn: 2310435430,
          consumptionTime: '2021-08-08'
        }
      ],
      dataList: [
        {
          src: './assets/pass.png',
          templateName: 'tttt',
          operator: 'abc',
          status: 1,
          creTime: '1787829323'
        },
        {
          src: './assets/pass.png',
          templateName: 'tttt',
          operator: 'abc',
          status: 1,
          creTime: '1787829323'
        },
        {
          src: './assets/pass.png',
          templateName: 'tttt',
          operator: 'abc',
          status: 1,
          creTime: '1787829323'
        }
      ]
    }
  },
  mounted() {},
  methods: {
    isAuth,
    searchPass() {},
    addPass() {},
    designPass() {
      this.isDesign = !this.isDesign
      //获取模板设计list
    },
    goNFC() {
      this.$router.push({ path: `/pass-center/nfc`, query: {} })
    },
    goCertificate() {
      this.$router.push({ path: `/pass-center/certificate`, query: {} })
    }
  }
}
</script>
<style lang="scss" scoped>
:deep(.el-table__row) {
  height: 100px;
}
:deep(.cell) {
  height: auto;
}
</style>
